<template>
  <div class="wrap">
    <myHead title="个人信息"></myHead>
    <div class="boxWrap">
        <div class="box">
            <p>头像</p>
            <p class="boxImg"><input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" @change="upImg"> <img :src="urls" alt=""></p>
        </div>
        <div class="item" @click="edit('姓名',0)">
            <p>姓名</p>
            <p><span>{{content[0].name}}</span><img src="../../../static/img/youjiantou003.png" alt=""></p>
        </div>
        <div class="item">
            <p>性别</p>
            <p @click="sex"><span>{{content[1].name}}</span><img src="../../../static/img/youjiantou003.png" alt=""></p>
          <van-popup v-model="show" position="bottom">
            <van-picker
              show-toolbar
              title="标题"
              :columns="columns"
              @cancel="onCancel"
              @confirm="onConfirm"
              :default-index="0"
            />
          </van-popup>
        </div>
        <div class="item" @click="edit('姓名',2)">
            <p>年龄</p>
            <p @click=""><span>{{content[2].name}}岁</span><img src="../../../static/img/youjiantou003.png" alt=""></p>
        </div>
        <div class="item">
          <p>学位</p>
          <p @click="showPosition = true"><span>{{content[3].name}}</span><img src="../../../static/img/youjiantou003.png" alt=""></p>
          <van-popup v-model="showPosition" position="bottom">
            <van-picker
              show-toolbar
              title="学位"
              :columns="positionS"
              @cancel="onCancel"
              @confirm="onConfirmPosition"
              :default-index="0"
            />
          </van-popup>
        </div>
    </div>
    <div class="btn" @click="save">保存</div>
    <van-dialog v-model="showDialog" :title="title" confirmButtonColor="#FB4448" cancelButtonColor="#333333" show-cancel-button @confirm="submit(index)">
      <input class="dialog" type="text" :placeholder="value" v-model="value" />
    </van-dialog>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  import Vue from 'vue';
  import { Toast } from "vant";
  import { Popup } from 'vant';
  import { Picker } from 'vant';
  Vue.use(Picker);
  Vue.use(Popup);
  Vue.use(Toast);
  export default {
    name: "lifeInformation",
    components:{
      myHead
    },
    data(){
      return {
        title:"姓名",
        content:[{
          name:"姓名",
        },{
          name:"男",
        },{
          name:"20",
        },{
          name:"本科",
        }],
        index:0,
        value:"",
        columns: ['男', '女'],
        positionS: ['大专及其以下', '本科', '研究生', '博士'],
        show:false,
        showPosition:false,
        showDialog:false,
        urls:'../../static/img/kuqi.png',
        base64:"",
      }
    },
    created() {
      this.$myAxios('index/Resume/personal_index', 'post', {
        user_id:this.$myStorage.query(),
      }).then(res => {
        console.log(res);
        if(res.data.state == 1){
          if(res.data.personal){
            this.content[0].name = res.data.personal.name;
            if(res.data.personal.gender == 1){
              this.content[1].name = "男";
            }else{
              this.content[1].name = "女";
            }
            this.content[2].name = res.data.personal.age;
            this.content[3].name = res.data.personal.degree;
            this.base64 = res.data.personal.image;
            this.urls = this.$store.state.imgurlApi+res.data.personal.image;
          }else{
            this.urls = this.$store.state.userInfo.avatar
          }
        }else{
          this.$myNotice("网络连接中断...",2000);
          this.$router.back();
        }
      });
    },
    methods:{
      edit(title,index){
        this.title = title;
        this.index = index;
        this.value = this.content[index].name;
        this.showDialog = true;
      },
      submit(index){
        this.content[index].name = this.value;
        this.placeholder = "";
        this.value = "";
      },
      jump(page,title,rightText,maxLength,rows,data){
          this.$router.push({
            name:page,
            query:{
              title,
              rightText,
              maxLength,
              rows,
              data
            }
          })
      },
      sex(){
        this.show = true;
      },
      onConfirm(value, index) {
        // Toast(`当前值：${value}, 当前索引：${index}`);
        this.content[1].name = value;
        this.show = false;
      },
      onConfirmPosition(value, index) {
        // Toast(`当前值：${value}, 当前索引：${index}`);
        this.content[3].name = value;
        this.showPosition = false;
      },
      onCancel() {
        // Toast('取消');
        this.show = false;
        this.showPosition = false;
      },
    //  上传头像
      upImg(files){
        var src = files.target.files[0];
        var lq = new FileReader();
        lq.readAsDataURL(src);
        lq.onload = res=>{
          var index = res.target.result.indexOf('base64,')+7;
          var result = res.target.result;
          this.urls = res.target.result;
          this.base64 = result.substring(index);
        };
        var file = new FormData();
        file.append('file',src);
        this.$axios.post('http://take.zhitiaoxiaoyuan.com/index/Recruitment/uploading',file,{
          headers:{
            "Content-Type":"multipart/form-data"
          }
        }).then(res=>{
          console.log(res.data,'251行');
          this.base64 = res.data
        });
        if (src.size/1024>1) {
          console.log('图片不能超过1MB')
        }
      },
      save(){
        let gender = 0;
        if(this.content[1].name =="男"){
          gender = 1
        }else{
          gender = 0
        }
        this.$myAxios('index/Resume/personal', 'post', {
          user_id:this.$myStorage.query(),
          name:this.content[0].name,
          gender:gender,
          age:this.content[2].name,
          image:this.base64,
          degree:this.content[3].name,
        }).then(res => {
          console.log(res);
          if(res.data.state == 1){
            this.$myNotice("编辑成功",2000);
            this.$router.back();
          }else{
            this.$myNotice("网络连接中断...",2000);
            this.$router.back();
          }
        });
      },
    },
    mounted() {

      // $('.van-picker-column__wrapper').css({
      //   "transform":'translate3d(0px, .88rem, 0px) !important'
      // })
    }
  }
</script>

<style scoped>
  .wrap {
    width: 100%;
    min-height: 6.67rem;
    box-sizing: border-box;
    padding-top: .5rem;
  }

  .boxWrap {
    padding: 0 .15rem;
  }
  .box {
    height: .87rem;
    box-sizing: border-box;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: .01rem solid #EEEEEE;
  }
  .box>p:nth-child(1) {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .box>p:nth-child(2) {
    width: .6rem;
    height: .6rem;
    border-radius: 100%;
    background-color: #EEEEEE;
  }
  .item {
    height: .8rem;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    justify-content: center;
    border-bottom: .01rem solid #EEEEEE;
  }
  .item>p:nth-child(1) {
    margin-bottom: .15rem;
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }
  .item>p:nth-child(2) {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .item>p:nth-child(2)>span {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .item>p:nth-child(2)>img {
    width: .06rem;
    height: .11rem;
  }
  .btn {
    width:3.24rem;
    height:.44rem;
    background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
    border-radius:.22rem;
    text-align: center;
    line-height: .44rem;
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #FFFFFF;
    position: absolute;
    left: 0;
    right: 0;
    bottom: .6rem;
    margin: auto;
  }
  .boxImg {
    position: relative;
  }
  .boxImg>input {
    font-size: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    opacity: 0;
  }
  .boxImg>img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
  }

/* 性别选择适配 */
  >>> .van-picker__toolbar {
    height: .44rem;
    line-height: .44rem;
  }
  >>> .van-picker__cancel {
    padding: 0 .16rem;
    color: #999999;
    font-size: .14rem;
  }
  >>> .van-picker__confirm {
    padding: 0 .16rem;
    color: #FF8C3C;
    font-size: .14rem;
  }
  >>> .van-picker__title {
    font-size: .16rem;
  }
  >>> .van-picker__columns {
    height: 2.2rem !important;
  }
  >>> .van-picker-column {
    font-size: .16rem;
  }
  >>> .van-picker-column__wrapper {
    line-height: .44rem !important;
  }
  >>> .van-picker-column__wrapper>li {
    height: .44rem !important;
  }
  >>> .van-picker-column__item {
    padding: 0 .05rem;
  }
  >>> .van-picker__mask {
    background-size: 100% .88rem !important;
  }
  >>> .van-hairline-unset--top-bottom {
    height: .44rem !important;
  }
  >>>.van-dialog__header{
    line-height:.24rem;
    padding-top:.24rem;
  }
  >>>.van-dialog__content{
    margin: .16rem .12rem .23rem;
  }
  >>>.van-dialog{
    width: 3.2rem;
    font-size: .16rem;
    border-radius:.16rem;
  }
  .dialog{
    width: calc(100% - 0.18rem);
    height: .36rem;
    border: none;
    background: #F6F6F6;
    border-radius: .08rem;
    padding: 0 .09rem;
    font-size: .14rem;
  }
</style>
